<template>
  <a-card :loading="loading">
    <search-bar :searchItems="searchItems" @search="searchHandle" :selectOptionDatas="selectOptionDatas" />
    <table-page
      :table-cols="tableCols"
      :table-datas="tableDatas"
      :operationBtns="operationBtns"
      @operationHandel="operationHandel"
      :selectOptionDatas="selectOptionDatas"
    />
    <pagination
      :total="params.total"
      :limit="params.limit"
      :page="params.page"
      @pagination="paginationHandel"
    />
    <modal-form
      :visibleModal="shipmentOrderformVisible"
      :formItems="shipmentOrderFormItems"
      @submit="shipmentSubmitHandel"
      @close="shipmentOrderformVisible=false"
      :formData="formData"
      :selectOptionDatas="selectOptionDatas"
    />
    <place-order-form 
      :visibleModal="placeOrderFormVisible" 
      @close="placeOrderFormVisible = false" 
    />
    <order-detail-form 
      :visibleModal="orderDetailFormVisible" 
      @close="orderDetailFormVisible = false" 
      :formData="formData"
    />
  </a-card>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import TablePage from "@/components/TablePage";
import Pagination from "@/components/Pagination";
import ModalForm from "@/components/ModalForm";
import PlaceOrderForm from "./components/PlaceOrderForm";
import OrderDetailForm from "./components/OrderDetailForm";

export default {
  components: {
    SearchBar,
    TablePage,
    Pagination,
    ModalForm,
    PlaceOrderForm,
    OrderDetailForm
  },
  data() {
    return {
      loading: false,
      searchItems: [
        { key: "orderNumber", label: "订单编号" },
        { key: "orderType", label: "订单类型", type: "select" },
      ],
      tableCols: [
        { title: "订单编号", dataIndex: "orderNumber" },
        { title: "下单时间", dataIndex: "orderTime", type: "dateTime" },
        { title: "订单类型", dataIndex: "orderType", type: "select" },
        { title: "下单用户", dataIndex: "orderUserName" },
        { title: "配送地址", dataIndex: "deliveryAddress" },
        { title: "订单状态", dataIndex: "status", type: "select" },
        { title: "备注", dataIndex: "remark" },
      ],
      operationBtns: [
        { key: "add", label: "创建订单", pos: "top", type: "primary" },
        { key: "detail", label: "订单详情" },
        { key: "confirm", label: "订单确认", perm: [1],
          conditions: [ {key: "status", value: 0 } ]
        },
        { key: "shopping", label: "订单发货", perm: [1],
          conditions: [ {key: "status", value: 1}]
        },
        { key: "shopping", label: "订单发货", perm: [1],
          conditions: [ {key: "status", value: 0}]
        },
        { key: "done", label: "确认收货", perm: [0, 1],
          conditions: [ {key: "status", value: 2}, {key: "orderUserId", value: this.$store.state.user.uid}]
        },
        { key: "cancel", label: "订单取消", perm: [0, 1],
          conditions: [ {key: "status", value: 0}, {key: "orderUserId", value: this.$store.state.user.uid}]
        },
        { key: "delete", label: "删除", perm: [9] },
      ],
      shipmentOrderFormItems: [
        { key: "deliveryMethod", label: "配送方式", type: "select" },
        { key: "deliveryBy", label: "配送人" },
        { key: "barcodes", label: "条码标签", type: "textarea" },
      ],
      params: { total: 0, limit: 10, page: 0 },
      tableDatas: [],
      selectOptionDatas:{
        orderType: [{ label: "用户订单", value: 0 }, { label: "电话订单", value: 1 }],
        deliveryMethod: [{ label: "机器配送", value: 0 }, { label: "人工配送", value: 1 }],
        status: [{ label: "已下单", value: 0 }, { label: "已接单", value: 1 },{ label: "配送中", value: 2 }, { label: "已送达", value: 3 }, { label: "已取消", value: 4 }],
      },
      formData: {
        deliveryMethod: 1,
      },
      shipmentOrderformVisible: false,
      placeOrderFormVisible: false,
      orderDetailFormVisible: false,
    };
  },
  created() {
    if (this.$route.query.status) {
      this.params["status"] = this.$route.query.status;
    } else {
      delete this.params["status"];
    }
    this.initData();
  },
  methods: {
    initData() {
      this.$store
        .dispatch("order/queryList", this.params)
        .then((res) => {
          this.tableDatas = res.list;
          this.params.total = res.totalCount;
        });
    },
    searchHandle(params) {
      console.log(params)
      this.params = { ...this.params, ...params };
      this.initData();
    },
    operationHandel(row, event) {
      var vm = this;
      if (event === "delete" || event === "confirm" || event === "done" || event === "cancel") {
        vm.orderOperateConfirm(event, row.id);
      } else if(event === 'add'){
        vm.placeOrderFormVisible = true
      } else if (event === "detail") {
        vm.$store.dispatch("order/queryInfo", row.id).then((res) => {
          vm.orderDetailFormVisible = true;
          vm.formData = res.data;
        })
      } else if (event === "shopping") {
        vm.shipmentOrderformVisible = true;
        vm.formData = { orderId: row.id, deliveryMethod: 1 };
      }
    },
    orderOperateConfirm(event, id){
      var vm = this;
      var title = "确定要删除此记录吗？";
      var type = "order/deleteOrder";
      if(event === "confirm"){
        title = "确认订单后请及时发货？";
        type = "order/confirmOrder";
      } else if(event === "done"){
        title = "确定订单已签收吗？";
        type = "order/receiptOrder";
      } else if(event === "cancel"){
        title = "确定要取消订单吗？";
        type = "order/cancelOrder";
      }
      vm.$confirm({
          title: title,
          onOk() {
            vm.$store.dispatch(type, id).then(() => {
              vm.initData();
              vm.$message.success("操作成功！");
            });
          },
        });
    },
    paginationHandel({ page, limit }) {
      this.params.page = page;
      this.params.limit = limit;
      this.initData();
    },
    shipmentSubmitHandel(data) {
      if(data.barcodes != undefined && data.barcodes != ""){
        data.barcodeList = data.barcodes.split("\n");
      }
      this.$store
        .dispatch(`order/shipmentOrder`, data)
        .then((res) => {
          this.$message.success("操作成功！");
          this.shipmentOrderformVisible = false;
          this.initData();
        });
    },
  },
};
</script>
<style scoped>
.ant-card {
  min-height: calc(100vh - 64px);
  margin: 24px 24px 0;
}
</style>